<template>
	<view class="container">
		<headerTop class="header"></headerTop>
		<view class="content">
			<view class="title"> 已解锁 </view>
			<view class="amount"> {{activityAmount}} </view>
			<view class="reward">
				<view class="illustrate">
					<text>红包说明</text><text>（7天内上线完成）</text>
				</view>
				<view class="red-list">
					<view class="red-item" v-for="(item,index) in dictDataByName">
						<text>{{item.dictLabel}}{{redText[index]}}</text>
						<image class="arrow" src="/static/action/recall11.png" mode=""></image>
						<view class="red-reward">
							<image v-if="orderNum>=item.dictLabel" src="/static/action/recall9.png" mode=""></image>
							<image v-else src="/static/action/recall10.png" mode=""></image>
							<view>{{item.dictValue}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="rules">
				<view class="rule-title">
					<view class="">
					</view>
					<text>规则</text>
				</view>
				<view class="rule-item" v-for="(item,index) in rules" :key="index">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				rules: ['1.本活动仅限回归老用户参与', '2.差评订单不计入奖励，有效订单工时需>=6小时', '3.奖励于7天后进行统一结算，请耐心等待', '4.请诚信接单，规范领取'],
				redText: ['单解锁', '单升级', '单升级'],
				orderNum: 0,
				activityAmount: 0,
				dictDataByName: []
			};
		},
		methods: {
			async searchSilentEmployeeRecall() {
				let res = await this.$fetch(this.$api.searchSilentEmployeeRecall, {}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.activityAmount = res.data.activityAmount
				this.orderNum = res.data.orderNum
				this.dictDataByName = res.data.dictDataByName
			}
		},
		onShow() {
			this.searchSilentEmployeeRecall()
		}
	}
</script>
<style lang="less" scoped>
	.container {
		width: 100%;
		height: 1850rpx;
		background: url('/static/action/recall8.png')center center/cover no-repeat;
		overflow: hidden;
		position: relative;

		&>.header {
			position: fixed;
			top: 0;
		}

		&>.content {
			height: 1400rpx;
			margin-top: 460rpx;
			background: url('/static/action/recall7.png')center center/cover no-repeat;
			overflow: hidden;

			&>.title {
				font-size: 40rpx;
				color: #FFFFFE;
				font-weight: bold;
				text-align: center;
				margin-top: 44rpx;
			}

			&>.amount {
				font-size: 222rpx;
				color: #FF3F38;
				font-weight: bold;
				text-align: center;
			}

			&>.reward {
				width: 640rpx;
				height: 280rpx;
				margin: 370rpx auto auto auto;

				&>.illustrate {
					color: #A60006;
					font-weight: bold;
					font-size: 28rpx;

					&>text:first-child {
						font-size: 32rpx;
					}
				}

				&>.red-list {
					display: flex;
					justify-content: space-between;
					font-weight: bold;
					margin-top: 40rpx;

					&>.red-item {
						width: 30%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						&>text {
							font-size: 24rpx;
							color: #A60006;
							margin-top: -50rpx;
						}

						&>.arrow {
							width: 11rpx;
							height: 19rpx;
							margin-top: -50rpx;
						}

						&>.red-reward {
							width: 73rpx;
							height: 145rpx;
							position: relative;

							&>image {
								width: 100%;
								height: 100%;
							}

							&>view {
								width: 100%;
								position: absolute;
								top: 40rpx;
								text-align: center;
								font-size: 28rpx;
								color: #FFFFFF;
							}
						}
					}
				}
			}

			&>.rules {
				width: 650rpx;
				margin: 0rpx auto auto auto;
				color: #FFFFFE;
				font-weight: bold;
				font-size: 28rpx;

				&>.rule-title {
					font-size: 32rpx;
					display: flex;
					align-items: center;
					line-height: 72rpx;

					&>view {
						width: 7rpx;
						height: 32rpx;
						background-color: #FFFFFF;
						margin-right: 10rpx;
					}
				}

				&>.rule-item {
					line-height: 60rpx;
				}
			}
		}
	}
</style>